<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src="/plugin/webman/push/push.js"> </script>
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<body>
<table id="word_table" lay-filter="dataTableFilter"></table>
<script>
  let resource_name = null;
  let resource_value = 0;

  // 建立连接
  var connection = new Push({
    url: 'ws://127.0.0.1:3131', // websocket地址
    app_key: '54278beb6e3e0ff2eaf265478d2c73c8',
    auth: '/plugin/webman/push/auth' // 订阅鉴权(仅限于私有频道)
  });
  // 浏览器监听world频道的消息
  var user_channel = connection.subscribe('world');

  // 当world频道有data事件的消息时
  user_channel.on('data', function(data) {
    resource_name = data['resource_name'];
    resource_value = data['resource_value'];
  });

  layui.use(['table', 'layer'], function () {
    var table = layui.table;
    var layer = layui.layer;

    // 渲染表格
    var renderTable = function () {

      table.render( {
        elem: '#word_table',
        cols: [[
          {field:'resource_name', title: 'World Resource', align: 'center'},
          {field:'resource_value', title: 'resource_value', align: 'center'},
          {field:'resource_add', title: '增长速度', align: 'center'},
          {field:'resource_status', title: '状态', align: 'center'}
        ]],
        data: [{
          'resource_name': resource_name,
          'resource_value': resource_value
        }]
      })
    }
    renderTable();
    // 每隔5秒（5000毫秒）重新渲染表格
    setInterval(renderTable, 1000);
  });

</script>
</body>
</html>